<template>
  <div class="pad-content-box form-no-padding-box">
    <section class="justify-center padding-10 padding-top-20 padding-bottom-15 border-bottom-D8D8D8">
      <span class="font-size-16 font-weight-bold margin-right-15">报销统计</span>
      <!-- <span class="font-size-14 color-666666">截至{{ new Date() | dateFormat('YYYY年MM月DD日') }}</span> -->
    </section>

    <section class="align-center padding-30 border-bottom-D8D8D8">
      <section class="flex-1">
        <div class="margin-bottom-30">
          <div class="font-size-24 color-333333 font-weight-bold text-align-center">{{statictisObj.monthApplyReimbursementAmount | moneyFilterNoUnit}}<span>元</span></div>
          <div class="font-size-14 color-666666 text-align-center">本月申请报销总额</div>
        </div>

        <div>
          <div class="font-size-24 color-333333 font-weight-bold text-align-center">{{statictisObj.monthFinishReimbursementAmount | moneyFilterNoUnit}}<span>元</span></div>
          <div class="font-size-14 color-666666 text-align-center">本月完成报销总额</div>
        </div>
      </section>
      <div class="line-box"></div>
      <section class="flex-1">
        <div class="margin-bottom-30">
          <div class="font-size-24 color-333333 font-weight-bold text-align-center">{{statictisObj.yearApplyReimbursementAmount | moneyFilterNoUnit}}<span>元</span></div>
          <div class="font-size-14 color-666666 text-align-center">年度申请报销总额</div>
        </div>

        <div>
          <div class="font-size-24 color-333333 font-weight-bold text-align-center">{{statictisObj.yearFinishReimbursementAmount | moneyFilterNoUnit}}<span>元</span></div>
          <div class="font-size-14 color-666666 text-align-center">年度完成报销总额</div>
        </div>
      </section>
    </section>

    <el-tabs class="margin-top-20 has-tab-header-border" v-model="activeTab" @tab-click="tabClick">
      <template v-for="item in typeList">
        <el-tab-pane :key="item.key" :name="item.key" :label="item.name">
          <data-list :active-tab="item.key" :ref="item.key"></data-list>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script>
  import { apiExpenseStatistics } from '../../api/expenseManage';
  import dataList from './components/dataList.vue';
  export default {
    name: 'bill',
    data() {
      return {
        activeTab: '1',
        typeList: [{ key: '1', name: '报销记录' }],
        projectKey:localStorage.getItem("projectKey"),
        statictisObj:{}
      };
    },
    mounted() {
      this.initSonElement();
      this.getStatistics();
    },
    methods: {
      //统计数据源
      async getStatistics() {
        let res = await apiExpenseStatistics({ projectKey: this.projectKey });
        this.statictisObj = res;
      },

      //切换tab
      tabClick(tab, event) {
        this.activeTab = tab.name;
        this.initSonElement();
      },

      //子组件初始化
      initSonElement() {
        this.$nextTick(() => {
          this.$refs[this.activeTab] && this.$refs[this.activeTab][0].init();
        });
      },
    },
    components: { dataList },
  };
</script>

<style lang="scss" scoped>
  .line-box {
    width: 1px;
    height: 80px;
    background: #d8d8d8;
  }

  ::v-deep .has-tab-header-border .el-tabs__header {
    border: none;
  }
</style>
